<template>
  <div class="container">
    <br>
    <button @click="router.back()" class="btn btn-sm btn-outline-primary"><font-awesome-icon :icon="['fas', 'arrow-left']" /> 返回</button>
    <br><br>
    <div class="row">
      <div class="col-lg-7 col-md-7 col-sm-12">
        <h4 class="mb-3">{{userInfo.name}} 的档案</h4>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="profile-banner">
      <div class='profile-background-cover border border-4 border-dark-subtle'>
        <div class="profile-background" :style="{backgroundImage: `url(${host_custom+'/pfp/'+userInfo.avatar})`}"></div>
      </div>
      <div class="col-lg-3 avatar-container animate__animated animate__faster animate__flipInX position-relative">
        <img :src="host_custom+'/pfp/'+userInfo.avatar" data-bs-toggle="modal" data-bs-target="#updatePfp" alt="avatar" title="点击更换头像" class="rounded-circle border border-4 border-dark-subtle profile-avatar">
        <Teleport to="body"><update-pfp/></Teleport>
        <br>
<!--        <small type="button" class="mt-1 text-primary" data-bs-toggle="modal" data-bs-target="#updatePfp" >更换头像</small>-->
      </div>
    </div>

    <div class="content">
      <div class="row">
        <div class="col-lg-3">
          <div class="text-center" style="margin-top:120px">
            <ul class="list-group animate__animated animate__faster animate__flipInX">
              <li class="list-group-item">
                <p class="m-0 position-relative">
                  <input :readonly="isReadOnly"
                         ref="nickNameInput"
                         type="text"
                         v-model="edit_username"
                         @input="isNeedSave"
                         class="bg-transparent fs-5 w-100 rounded"
                         :class="{
                           'border-primary': !isReadOnly,
                           'border-0': isReadOnly
                         }"
                         style="text-align: center; outline: none"
                  />
                </p>
                <div>
                  <small v-if="isReadOnly" class="text-primary" style="cursor:pointer;" @click.prevent="editNickname">编辑</small>
                  <div v-else class="mt-1">
                    <font-awesome-icon class="text-success btn" :icon="['fas', 'circle-check']" @click.prevent="updateNickname"/>
                    &nbsp;
                    <font-awesome-icon class="text-danger btn" :icon="['fas', 'circle-xmark']" @click.prevent="isReadOnly = true; edit_username = userInfo.name"/>
                  </div>
                </div>
                <small class="text-secondary">账号：{{ userInfo.username }}</small>
              </li>
              <li class="list-group-item">
                <font-awesome-icon :icon="['fas', 'fa-location-dot']"/>&ensp;
                <span class="region">未知</span>
              </li>
              <li class="list-group-item">
                <font-awesome-icon :icon="['fas', 'fa-calendar-days']"/>&ensp;
                <span class="join_time">{{new Date(userInfo.create_time).toLocaleDateString()}} 加入</span>

              </li>
              <li class="list-group-item text-secondary">
                N/A
              </li>
            </ul>
            <div class="row">
              <div class="col mt-2" @click="updatePrivacy">
                <button title="所有人都可以查看你的资料" v-if="userInfo.privacy" type="button" class="w-100 btn btn-success btn-sm text-nowrap animate__animated animate__faster animate__bounceIn">
                  <font-awesome-icon :icon="['far', 'eye']" />
                  公开
                </button>

                <button title="无人能够查看你的资料" v-else type="button" class="w-100 btn btn-danger btn-sm text-nowrap animate__animated animate__faster animate__bounceIn">
                  <font-awesome-icon :icon="['far', 'eye-slash']" />
                  私密
                </button>
              </div>

              <div class="col mt-2">
                <button type="button" class="w-100 btn btn-secondary btn-sm text-nowrap disabled">
                  N/A
                </button>
              </div>
            </div>
          </div>
        </div>


        <div class="col-lg-9">
          <ul class="nav nav-tabs mt-3" id="profileTab" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">
                状态
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">
                成就
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
                留言
              </button>
            </li>
          </ul>
          <div class="tab-content" id="profileTabContent">
            <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0"></div>
            <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0"></div>
            <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>
  <br>
  <br>
</template>

<script setup>
import 'animate.css'
import { onMounted, ref} from 'vue'
import { storeToRefs } from "pinia";
import { userStore } from "@/stores/userStore.js";
import {host_custom} from "@/host.js";
import axios from "axios";

import UpdatePfp from "@/components/modal/UpdatePfpModal.vue";
import {showToast} from "@/components/toasts/LoginRegToast.js";
import router from "@/router/index.js";
const userAction = userStore()
const { userInfo, userSetting } = storeToRefs(userAction)
const edit_username = ref('')
const isReadOnly = ref(true)
const nickNameInput = ref()

const updateNickname = async () => {
  if (userInfo.value.name === edit_username.value) {
    isReadOnly.value = true
    return void 0
  }
  const regEx = /.{1,12}$/
  if (!regEx.test(edit_username.value)) {
    showToast('error', '更新失败，用户名不规范')
    return void 0
  }
  const res = await axios.patch(`${host_custom}/updateNickname`, {newNickname: edit_username.value, uid: userInfo.value.id})
  if (res.status === 200) {
    userInfo.value.name = edit_username.value
    showToast('success', '已保存')
    isReadOnly.value = true
  } else {
    showToast('error', '更新失败，稍后再试')
  }
}

const updatePrivacy = async () => {
  const rs = await axios.put(`${host_custom}/updatePrivacy`, {params: {uid: userInfo.value.id}})
  if (rs.status === 200) {
    userInfo.value.privacy ? userInfo.value.privacy = 0 : userInfo.value.privacy = 1
  }
}

const isNeedSave = () => {
  const regEx = /.{1,12}$/
  if (regEx.test(edit_username.value)) {
    if (edit_username.value !== userInfo.value.name) {

    } else {

    }
  } else {
    return void 0
  }
}

const editNickname = () => {
  isReadOnly.value = false
  nickNameInput.value.focus()
}

onMounted(async ()=>{
  edit_username.value = userInfo.value.name
})
</script>

<style>
.profile-banner {
  width: 100%;
  height: 300px;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  position: relative;
}

.profile-background-cover {
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.profile-background {
  position: relative;
  width: 105%;
  height: 105%;
  background-position: 50% 50%;
  filter: blur(12px);
  background-size: cover;
  animation: bgmv-eff1 16s ease infinite;
}

@keyframes bgmv-eff1 {
  0%, 100% {background-position: 50% 50%}
  15% {background-position: 51% 51%; transform: rotate(1deg)}
  25% {background-position: 49% 53%; transform: rotate(-1deg);}
  35% {background-position: 51% 51%; transform: scale(1.05);}
  60% {background-position: 51% 53%; transform: scale(1.08) rotate(-2deg)}
  80% {background-position: 51% 52%; transform: scale(1) rotate(2deg)}
  90% {background-position: 51% 51%;}
}

.avatar-container {
  height: 300px;
  text-align: center;
}

.profile-avatar {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 196px auto 0;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.profile-avatar:hover {
  filter: brightness(.5);
}

.editableIcon {
  cursor: pointer;
}

.editableIcon:hover {
  color: var(--bs-primary);
}

</style>